<template>
    <div>
        <dz-header title="优选APP"></dz-header>
        <h1 style="color:red;">Index.vue 首页</h1>
        <h1 style="color:red;">{{ nowTime }}</h1>
        <swiper v-if="newAdvs().length>1" :options="swiperOption" ref="mySwiper">
            <swiper-slide v-for="(item) in newAdvs()" :key="item.id">
                <div class="page-item">
                    <!-- <img :src="item.img" alt="" srcset="" οnerrοr="defaultImg"> -->
                    <img :src="item.img" alt srcset @error="show_default_image" />
                    <!-- <img :src="defaultImg2(index,item.img)" :class="'img'+index"> -->
                    <!-- {{ item.time }} -->
                </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
        <van-button type="primary" @click="getTop250">获取Top250</van-button>
        <!-- <img
          src="https://images.weserv.nl/?url=img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p67.jpg"
          alt
          srcset
        /> -->
        <img src="https://images.weserv.nl/?url=img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p67.jpg" />
    </div>
</template>

<script>
import dzHeader from "@/components/tabbar/Header";
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import fTime from '@/tools/ctime'

export default {
    name: "index",
    components: {
        dzHeader,
        swiper,
        swiperSlide
    },
    data() {
        return {
            nowTime: new Date(),
            swiperOption: {
                autoplay: {
                    delay: 3000,
                    // stopOnLastSlide: false,
                    disableOnInteraction: false // 手动切换之后继续自动轮播
                },
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true
                },
                observer: true,
                observeParents: true,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev"
                },
                loop: true,
                slidesPerView: 1
            },
            advLists: [],
            defaultImg: 'this.src="./static/images/404.png";this.onerror=null' //'../../assets/images/404.png'
        };
    },
    mounted() {
        this.$axios
            .post("https://api.apiopen.top/getImages", { page: "1", count: "5" })
            .then(result => {
                // result.data.result.forEach(element => {
                //   element.img = 'https://images.weserv.nl/?url=' + element.img.slice(element.img.search(/:\/\//) + 3)
                // });
                this.advLists = result.data.result;
            })
            .catch(err => {
                console.log(err)
            });
        let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
        // this.timer = setInterval(() => {
        //     // _this.nowTime = new Date();// 修改数据date
        //     _this.nowTime = _this.timeFormate(new Date());
        // }, 1000);
        this.timer = setInterval(() => {
            _this.nowTime = fTime.timeFormate(new Date());
        }, 1000);
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.swiper;
        }
    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
        }
    },
    methods: {
        // timeFormate(timeStamp) {
        //     let year = new Date(timeStamp).getFullYear();
        //     let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
        //     let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
        //     let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
        //     let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
        //     let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
        //     return `当前时间:${ year }年${ month }月${ date }日${hh}:${mm}:${ss}`
        // },
        getTop250() {
            this.$axios
                .get("/api/movie/in_theaters")
                .then(result => {
                    console.log(result);
                })
                .catch(err => {
                    console.log(err);
                });
        },
        newAdvs() {
            return this.advLists;
        },
        defaultImg2(index, imgUrl) {
            const name = `img${index}`;
            // 异步等待dom渲染，不然会找不到元素
            setTimeout(() => {
                const ele = document.getElementsByClassName(name)[0];
                ele.setAttribute("src", "../../assets/logo.png");
                this.$axios.get(imgUrl).then(res => {
                    if (res) {
                        ele.setAttribute("src", imgUrl);
                    }
                });
            }, 0);
        },
        show_default_image: function(event) {
            event.target.src = "./static/images/404.png";
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
h1 {
    margin-top: 64px;
}

.page-item {
    height: 200px;
    background-color: #fff;
    text-align: center;
    img {
        height: 100%;
    }
}
</style>